<script setup>
import {confirm} from '@/utils/element-helper'
import {Dict} from '@/utils/resource'
import {dictStore} from "@/store/dict";
import {ref,reactive} from "vue";

const dictS = dictStore()

const table = reactive({
  rows: [],
  total: 0,
  pageSize: 10,
  pageNumber: 1,
  loading:false,
})


query()

function handleSizeChange(val) {
  query(val)
}

function handleCurrentChange(val) {
  query(undefined, val)
}

async function query(pageSize, pageNumber) {
  if (pageSize) {
    table.pageSize = pageSize
  }
  if (pageNumber) {
    table.pageNumber = pageNumber
  }
  await Dict.search(table, {
    sc: [
      {
        "condition": "and",
        "comparator": "like",
        "field": "name,description",
        "value": dictS.queryParams.name
      },
      {
        "condition": "by",
        "comparator": "group by",
        "field": 'code',
      },
      {
        "condition": "by",
        "comparator": "order by",
        "field": 'updated',
        "value": "desc"
      }
    ],
  })
}

function handleDelete(index, row) {
  confirm({}, () => Dict.delByCode(row.code), (resp) => query())
}

</script>

<template>
  <el-row>
    <el-form :inline="true" :model="dictS.queryParams">
      <el-form-item label="编码">
        <el-input v-model="dictS.queryParams.code" placeholder="字典编码"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="dictS.queryParams.description" placeholder="字典描述"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="query(undefined,undefined)" plain>查询</el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <router-link to="/dict/new">
          <el-button type="success" icon="CirclePlus" plain>新增</el-button>
        </router-link>
      </el-form-item>
    </el-form>
  </el-row>
  <el-row>
    <el-table v-loading="table.loading"
              :data="table.rows"
              border
              stripe
              style="width: 100%">
      <el-table-column
          prop="code"
          label="编码"
          align="center"
          min-width="20%">
      </el-table-column>
      <el-table-column
          prop="description"
          label="描述"
          align="center"
          min-width="20%">
      </el-table-column>
      <el-table-column
          prop="priority"
          label="排序"
          align="center"
          min-width="8%">
      </el-table-column>
      <el-table-column
          prop="status"
          align="center"
          label="操作"
          min-width="20%">
        <template #default="scope">
          <router-link :to="'/dict/'+scope.row.code">
            <el-button style="margin-right: 10px"
                       type="warning"
                       size="small">编辑
            </el-button>
          </router-link>
          <el-button style="margin-right: 10px"
                     type="danger"
                     size="small"
                     @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="table.pageNumber"
        :page-sizes="[5, 10, 20, 30, 50]"
        :page-size="table.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="table.total">
    </el-pagination>
  </el-row>
</template>


<style scoped>


</style>
